<template>
  <div style="padding-bottom:24px">
    <table-ellipsis
      class="listTitle"
      :tableEllipsisIsTurnLine="false"
      :text="`${recordTitle} ：${recordData.partNumber}`"
    ></table-ellipsis>
    <a-row>
      <a-col
        :sm="24"
        v-for="(item, index) in modelList"
        :key="index"
      >
        <div class="modelItem">
          <div class="modelName">
            <table-ellipsis :tableEllipsisIsTurnLine="false" :text="item.name"></table-ellipsis>
          </div>
          <div class="modelOther">
            <div class="inforItem">
              <span class="inforLabel">{{ $t('modelCode') }}</span>
              <table-ellipsis
                :tableEllipsisIsTurnLine="false"
                class="inforContent"
                style="font-weight:bolder;color: @primary-color"
                :text="item.code"
              ></table-ellipsis>
            </div>
            <div
              class="inforItem"
              style="margin-top:6px"
            >
              <span class="inforLabel">{{ $t('brandName') }}</span>
              <table-ellipsis
                :tableEllipsisIsTurnLine="false"
                class="inforContent"
                :text="item.brandName"
              ></table-ellipsis>
            </div>
          </div>
        </div>
      </a-col>
    </a-row>
  </div>
</template>
<script>
import TableEllipsis from '@/components/Ellipsis/TableEllipsis'

export default {
  name: 'RelatedModel',
  components: { TableEllipsis },
  props: {
    recordTitle: {
      type: String,
      default: ''
    },
    recordData: {
      type: Object,
      default () {
        return {}
      }
    }
  },
  data () {
    return {
      modelList: []
    }
  },
  mounted () {
    this.getModelList()
  },
  methods: {
    getModelList () {
      const vm = this
      vm.$api.getMyAllModel({ ids: vm.recordData.modelIds }).then((response) => {
        vm.modelList = response.data
      })
    }
  },
  watch: {
    recordData: {
      handler () {
        const vm = this
        vm.getModelList()
      },
      deep: true
    }
  }
}
</script>
<style lang="less" scoped>
.listTitle {
  color: #5e5e5e;
}
.modelItem {
  height: 88px;
  border-left: 1px solid #4388a6;
  margin-top: 24px;
  padding: 8px 24px 8px 8px;
  &:hover {
    background: rgba(242, 242, 242, 0.5);
    border-left: 4px solid #4388a6;
    padding-left: 5px;
  }
  .modelName {
    font-size: 1.4rem;
    color: #5e5e5e;
    font-weight: bolder;
  }
  .modelOther {
    font-size: 1.2rem;
    color: #5e5e5e;
    margin-top: 14px;
    .inforItem {
      position: relative;
      .inforLabel {
        position: absolute;
        left: 0;
        top: 0;
      }
      .inforContent {
        padding-left: 70px;
        text-align: right;
      }
    }
  }
}
</style>
